<template>
  <ChartHeader title="整体概况"></ChartHeader>

  <van-cell-group inset class="shadow">
    <!-- <van-cell title="在校学生人数" :value="studentNum" /> -->
    <!-- <van-cell title="在校学生人数" :value="700" /> -->
    <van-cell title="发布测评人数" :value="`${findReleaseFinishTestNum}人`" />
    <van-cell title="已完成测评人数" :value="`${completeTestNum}人`" />
    <van-cell
      title="未完成测评人数"
      :value="`${findNoReleaseFinishTestNum}人`"
    />
    <!-- <van-cell title="未完成测评人数" :value="noCompleteTestNum" /> -->
    <van-cell title="预警人数" :value="`${levelAllNum}人`" />
  </van-cell-group>
</template>

<script lang="ts" setup>
import { defineProps, toRefs, reactive } from 'vue'
import { NumData, TotalData } from '../types'
import { usePsychologicalSecurity } from '../use/usePsychologicalSecurity'
import ChartHeader from './ChartHeader.vue'

const props = defineProps<{
  numData: NumData | null
  totalData: TotalData | null
}>()

const {
  studentNum,
  completeTestNum,
  noCompleteTestNum,
  teacherNum,
  allTestNum,
  levelAllNum,
  findReleaseFinishTestNum,
  findNoReleaseFinishTestNum,
} = usePsychologicalSecurity(toRefs(props))
</script>

<style scoped lang="less">
@import url('./board-common.less');
</style>
